<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <hr>

        <my-head></my-head>
        <parent></parent>
    </div>

    <template id="myhead">
        <div>
            <h2>myhead - myhead - header</h2>
        </div>
    </template>

    <template id="parent">
        <div>
            <h2>parent-parent-父组件</h2>
            <h2>count--{{count}}</h2>
            <h2>msg--{{msg}}</h2>
            <div v-show="show" :style="{width:'200px',height:'100px',background:'deeppink'}">子组件控制我的显示和隐藏</div>
            <hr>

            <childone
                :msg="msg"
                :changeshow="changeshow"
                :show="show"
                @changecount="getNewCount"
                @changemymsg="getmymsg"
            ></childone>
            <hr>
            <childtwo
                :changecount="getNewCount"
                :changemsg="getmymsg"
            ></childtwo>
        </div>
    </template>

    <template id="childone">
        <div>
            <h2>childone - childone - 1  - 子组件 </h2>
            <button @click="changepcount">自定义事件 子组件去改变父组件的count</button>
            <p><input type="text" :value="msg" @input="changeMsg"></p>
            <button @click="changeCountBy">$parent  子组件去改变父组件的count/show/msg..</button>
            <button @click="changeshow(!show)">反向props 子组件去改变父组件的show</button>
        </div>
    </template>

    <template id="childtwo">
        <div>
            <h2>childtwo - childtwo - 2  - 子组件 </h2>
            <button @click="changecount(10)">反向props 去修改父组件的count</button>
            <button @click="changemsg('真呀真麻烦')">反向props 去修改父亲组件的msg</button>
        </div>
    </template>

    <script>
        Vue.component("myHead",{
            template:"#myhead",
        })

        Vue.component('parent',{
            template:'#parent',
            data(){
                return{
                    count:100,
                    msg:'这都是啥子啊',
                    show:true
                }
            },
            methods: {
                getNewCount(count){
                    this.count+=count;
                },
                getmymsg(msg){
                    this.msg=msg
                },
                getData(){
                    console.log("正在等待ajax 请求 ")
                },
                changeshow(){
                    this.show=!this.show
                }

            },
        })

        Vue.component('childone',{
            template:'#childone',
            props:['msg','show','changeshow'],
            methods:{
                changepcount(){
                    this.$emit('changecount',200)
                },
                changeMsg(e){
                    this.$emit('changemymsg',e.target.value)
                },
                changeCountBy(){
                    this.$parent.count++;
                    this.$parent.msg='hh hhh hh';
                    this.$parent.show=!this.$parent.show;
                    this.$parent.getData()
                }
            }

        })

        Vue.component('childtwo',{
            template:'#childtwo',
            props:{
                changecount:Function,
                changemsg:Function
            },
            
        })

        const vm = new Vue({
            data:{
                title:"组件通信（子改父）"
            },
            mounted() {
                document.getElementsByTagName('title')[0].innerHTML=this.title;
            },
        }).$mount('#app')



    </script>
    <!-- 
        组件  小巧  独立  可复用  
        组件系统 
        组件组织关系  
        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        Emit  发送
        On    监听 
        Once  只触发一次  


        组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）


        2. 子组件访问父组件
        a.  自定义事件   emit  子组件发送事件    on 父组件监听事件 修改内部变量   
        b.  $parent     父实例，如果当前实例有的话  父组件  
        c.  反向props   父组件 把修改自身变量的方法函数通过props 传递给子组件 子组件执行这个props函数  实现子改父 
        d.  事件中央总线   
        e.  vuex   
        
        3.  兄弟组件之间的通信  


        refs   this.$refs  
        1. 绑定到标签  指的当前的真实DOM 
        2. 绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数 
     -->
</body>
</html>